<!-- pages/login/qq.vue -->
<script setup>
  import { ref } from 'vue'
  import { bindingMobileApi, QQLoginApi, verifyCodeApi } from '@/services/user'
  import { useUserStore } from '@/stores/user'

  const userStore = useUserStore()

  const userInfo = ref({})

  function jumpRoute(userBasicInfo) {
    userStore.setBasicInfo(userBasicInfo)

    // Tips: switchTab的方式会将查询参数丢失，因为uni和小程序都不支持
    uni[userStore.returnType]({
      url: userStore.returnUrl,
    })

    // 回跳成功后，重置 url 和 type
    userStore.resetReturnUrlAndType()
  }

  ;(async () => {
    uni.showLoading({
      title: '请稍后，绑定关系校验中...',
      mask: true,
    })

    const res = await uniCloud.callFunction({
      name: 'qq-connect',
      data: {
        access_token: location.hash.split('&')[0].split('=')[1],
      },
    })
    userInfo.value = res.result

    // 尝试QQ登录，响应数据中有个 bindingFlag 可以识别出是否绑定过手机号
    const res2 = await QQLoginApi({
      source: 'qq',
      ...userInfo.value,
    })

    // 绑定过手机号
    if (res2.data.bindingFlag) {
      jumpRoute(res2.data)
    }
  })()

  const formRef = ref(null)

  const isShowCountdown = ref(false)

  // 表单数据
  const formData = ref({
    mobile: '13230000027',
    code: '',
  })

  const rules = ref({
    mobile: {
      rules: [
        { required: true, errorMessage: '请填写手机号码' },
        { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号码格式不正确' },
      ],
    },
    code: {
      rules: [
        { required: true, errorMessage: '请输入验证码' },
        { pattern: /^\d{6}$/, errorMessage: '验证码格式不正确' },
      ],
    },
  })

  // 获取验证码
  async function onTextButtonClick() {
    // 校验手机号
    await formRef.value.validateField(['mobile'])

    // 调用接口，发送短信...
    const res = await verifyCodeApi({
      mobile: formData.value.mobile,
      /** 注意类型参数据 **/
      type: 'bindMobile',
      /** 注意类型参数据 **/
    })
    uni.utils.toast('验证码已发送，请查收!')
    formData.value.code = res.data.code

    isShowCountdown.value = true
  }

  // 绑定手机号
  async function onBindingButtonClick() {
    await formRef.value.validate()

    // 调用接口
    const res = await bindingMobileApi({
      ...formData.value,
      openId: userInfo.value.openId,
    })

    console.log(res, 'res')

    // 登录成功后跳转
    jumpRoute(res.data)
  }
</script>
<template>
  <view class="user-login">
    <view class="welcome">
      <image class="avatar" :src="userInfo.avatar"></image>
      <text class="nickname">
        Hi，{{ userInfo.nickname }}
        欢迎来优医咨询，完成绑定后可以QQ账号一键登录哦~
      </text>
    </view>

    <uni-forms
      class="login-form"
      ref="formRef"
      :model="formData"
      :rules="rules"
    >
      <uni-forms-item name="mobile">
        <uni-easyinput
          v-model="formData.mobile"
          :input-border="false"
          :clearable="false"
          placeholder="请输入手机号"
          placeholder-style="color: #C3C3C5"
        />
      </uni-forms-item>
      <uni-forms-item name="code">
        <uni-easyinput
          v-model="formData.code"
          :input-border="false"
          :clearable="false"
          placeholder="请输入验证码"
          placeholder-style="color: #C3C3C5"
        />

        <view v-if="isShowCountdown" style="display: flex">
          <!-- <yyzx-countdown
            :second="59"
            :showDay="false"
            :showHours="false"
            :showMinutes="false"
            @timeup="isShowCountdown = false"
          ></yyzx-countdown
          >秒后再次获取 -->
          <yyzx-countdown2 @timeup="isShowCountdown = false"></yyzx-countdown2
          >秒后再次获取
        </view>
        <text v-else class="text-button" @click="onTextButtonClick"
          >获取验证码</text
        >
      </uni-forms-item>

      <view class="agreement">
        <uni-icons
          v-if="true"
          size="18"
          color="#16C2A3"
          type="checkbox-filled"
        />
        <uni-icons v-else size="18" color="#d1d1d1" type="circle" />
        我已同意
        <text class="link">用户协议</text>
        及
        <text class="link">隐私协议</text>
      </view>

      <button class="uni-button" @click="onBindingButtonClick">
        绑定手机号
      </button>
      <button class="uni-button secondary">暂不绑定</button>
    </uni-forms>
  </view>
</template>

<style lang="scss">
  .user-login {
    padding: 120rpx 60rpx 0;
  }

  .welcome {
    display: flex;
    align-items: center;
    margin-bottom: 60rpx;

    .avatar {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
    }

    .nickname {
      flex: 1;
      font-size: 28rpx;
      color: #3c3e42;
    }
  }

  .uni-forms-item {
    height: 80rpx;
    margin-bottom: 30rpx !important;
    border-bottom: 1rpx solid #ededed;
    box-sizing: border-box;
    position: relative;
  }

  .agreement {
    font-size: 26rpx;
    color: #3c3e42;
    display: flex;
    align-items: center;
    margin-top: 50rpx;
    margin-left: -10rpx;

    .link {
      color: #16c2a3;
    }
  }

  :deep(.uni-forms-item__content) {
    display: flex;
    align-items: center;
  }

  :deep(.uni-forms-item__error) {
    width: 100%;
    padding-top: 10rpx;
    padding-left: 10rpx;
    border-top: 2rpx solid #eb5757;
    color: #eb5757;
    font-size: 24rpx;
    transition: none;
  }

  .text-button {
    display: flex;
    justify-content: flex-end;
    width: 240rpx;
    padding-left: 10rpx;
    font-size: 28rpx;
    color: #16c2a3;
    border-left: 2rpx solid #eee;
  }

  .uni-button {
    margin-top: 50rpx;

    &.secondary {
      background-color: #50c8fd;
    }

    &[disabled] {
      background-color: #fafafa;
      color: #d9dbde;
    }
  }

  .uni-navigator {
    margin-top: 30rpx;
    text-align: center;
    color: #848484;
    font-size: 28rpx;
  }
</style>
